<template>
  <el-collapse-item title="动效" name="effect">
    <el-form label-width="100px">
      <el-form-item label="特效">
        <el-select v-model="curComponent.siderType">
          <el-option
            v-for="item in subtitleSliderTypeOptions"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="!isStaticEffect" label="滚动速度">
        <el-select v-model="curComponent.scrollSpeed">
          <el-option v-for="item in 15" :key="item" :value="`${item}`" :label="`${item}`"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="停留时间">
        <el-input v-model="curComponent.pauseTime" @change="changePageTotalTime"
          ><template slot="append">秒</template></el-input
        >
      </el-form-item>
      <el-form-item label="字体渐变效果">
        <el-select v-model="curComponent.borderColoreffect">
          <el-option
            v-for="item in sliderTypeOptions"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-collapse-item>
</template>

<script>
import { sliderTypeOptions, subtitleSliderTypeOptions } from '@/utils/attr'

export default {
  name: 'EffectAttr',
  data() {
    this.sliderTypeOptions = sliderTypeOptions
    this.subtitleSliderTypeOptions = subtitleSliderTypeOptions
    return {}
  },
  computed: {
    curComponent() {
      return this.$store.state.curComponent
    },
    isStaticEffect() {
      return this.curComponent.siderType === 0
    },
  },
  methods: {
    changePageTotalTime() {
      this.$store.commit('setPageTotalTime')
    },
  },
}
</script>
